<template>
  <view class="pre-inbound-container">
    <!-- 查询区域 -->
    <view class="query-section">
      <view class="query-header">
        <text class="query-title">查询入库单</text>
        <view class="records-btn" @click="showRecordsModal">
          <uni-icons type="list" size="16" color="#007AFF"></uni-icons>
          <text class="btn-text">当前执行记录({{ executionRecords.length }})</text>
        </view>
      </view>

      <!-- 查询输入区域 -->
      <view class="query-input-area">
        <view class="input-group">
          <text class="input-label">请输入或扫描SN码</text>
          <view class="input-wrapper">
            <input 
              ref="snInput"
              class="query-input" 
              v-model="form.sn" 
              :focus="shouldFocus"
              placeholder="请输入或扫描SN码"
              @confirm="handleCreateBySn"
            />
            <view class="input-icon scan-icon" @click="handleScan">
              <uni-icons type="scan" size="16" color="#007AFF"></uni-icons>
            </view>
            <view class="input-icon clear-icon" @click="form.sn = ''">
              <uni-icons type="clear" size="16" color="#999"></uni-icons>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 入库单信息卡片（参考 product.vue 的 info 样式） -->
    <view v-if="recpt.recptHeader" class="info-card">
      <view class="info-header">
        <text class="info-title">入库单信息</text>
        <view class="info-status" :class="getStatusClass(recpt.recptHeader.status)">
          {{ getStatusText(recpt.recptHeader.status) }}
        </view>
      </view>
      <view class="info-content">
        <view class="info-row"><text class="info-label">入库单号:</text><text class="info-value">{{ recpt.recptHeader.recptCode }}</text></view>
        <view class="info-row"><text class="info-label">生产工单编号:</text><text class="info-value">{{ recpt.recptHeader.workorderCode }}</text></view>
      </view>
    </view>

    <!-- 行/物料卡片 -->
    <view v-if="recpt.recptLine" class="info-card">
      <view class="info-header green">
        <text class="info-title">物料/成品</text>
      </view>
      <view class="info-content">
		
        <view class="info-row"><text class="info-label">产品编码:</text><text class="info-value">{{ recpt.recptLine.itemCode }}</text></view>
        <view class="info-row"><text class="info-label">产品名称:</text><text class="info-value">{{ recpt.recptLine.itemName }}</text></view>
        <view class="info-row"><text class="info-label">规格:</text><text class="info-value">{{ recpt.recptLine.specification }}</text></view>
        <view class="info-row"><text class="info-label">数量:</text><text class="info-value">{{ recpt.recptLine.quantityRecived }}</text></view>
        <view class="info-row"><text class="info-label">单位:</text><text class="info-value">{{ recpt.recptLine.unitName }}</text></view>
        <view class="info-row"><text class="info-label">SN:</text><text class="info-value">{{ recpt.sn }}</text></view>
        <template v-if="recpt.recptDetail">
          <view class="info-row">
            <text class="info-label">外观编码:</text>
            <text class="info-value">{{ recpt.recptDetail.snWgbm || '' }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">电伏数:</text>
            <text class="info-value">{{ recpt.recptDetail.snDf || '' }}</text>
          </view>
        </template>
		</view>
    </view>

    <!-- 明细数据展示区域 -->
    <view  v-if="recpt.recptHeader && (recpt.recptHeader.status == 'APPROVED' || recpt.recptHeader.status == 'FINISHED') && recpt.recptDetail" class="info-card">
      <view class="info-content">
        <!-- 已选择的仓位信息 -->
        <view class="detail-section">
          <text class="detail-section-title">已选择仓位</text>
          <view class="location-detail">
            <view class="location-item">
              <text class="location-label">仓库:</text>
              <text class="location-value">{{ recpt.recptDetail.warehouseName || '' }}</text>
            </view>
            <view class="location-item">
              <text class="location-label">库区:</text>
              <text class="location-value">{{ recpt.recptDetail.locationName || '' }}</text>
            </view>
            <view class="location-item">
              <text class="location-label">库位:</text>
              <text class="location-value">{{ recpt.recptDetail.areaCode || '' }}</text>
            </view>
            <view class="location-item">
              <text class="location-label">备注:</text>
              <text class="location-value">{{ recpt.recptDetail.remark || '' }}</text>
            </view>
          </view>
        </view>

        <!-- 视频地址信息 -->
        <view class="detail-section">
          <text class="detail-section-title">视频信息</text>
          <video-preview :video-url="recpt.recptDetail.attr2" />
        </view>
      </view>
    </view>

    <!-- 仓位选择（直接复用 product.vue 的 warehouse 组件交互） -->
	 <view v-if="recpt.recptHeader && recpt.recptHeader.status !== 'APPROVED' &&  recpt.recptHeader.status !== 'FINISHED'" class="info-card">
	  <view class="info-header blue">
		<text class="info-title">预入库位置</text>
	  </view>
	  <view class="info-content">
		<view class="location-input-group">
		  <text class="info-label">仓库/库区/库位:</text>
		  <warehouse 
			:warehouse-display-mode="warehouseDisplayMode"
			:location-display-mode="locationDisplayMode"
			:area-display-mode="areaDisplayMode"
			:scanned-area-code="scannedAreaCode"
			@selected="onWarehouseSelected"
		  />
		</view>
<!-- 		<view class="location-preview" v-if="locationText">{{ locationText }}</view> -->
		<!-- 添加备注输入区域 -->
		<view class="location-input-group">
			<text class="location-input-label">备注:</text>
			<view class="remark-input-wrapper">
				<textarea class="remark-textarea" v-model="locationRemark" placeholder="请输入备注信息（可选）"
					:maxlength="200" :show-confirm-bar="false" :auto-height="false" style="height: 72rpx;" />
				<view class="remark-counter">{{ (locationRemark || '').trim().length }}/200</view>
			</view>
		</view>
		
		<!-- 视频上传区域 -->
		<view class="location-input-group">
			<text class="location-input-label">视频上传:</text>
			<video-upload 
				:url-only="true"
				@upload-success="onVideoUploadSuccess"
				@upload-error="onVideoUploadError"
				@video-removed="onVideoRemoved"
			/>
		</view>
		
		<button class="btn primary"  @click="handlePutaway">预入库执行</button>
	  </view>
	</view>

    <!-- 执行记录弹窗 -->
    <uni-popup ref="recordsPopup" type="bottom" :safe-area="false">
      <view class="records-modal">
        <view class="modal-header">
          <text class="modal-title">执行记录</text>
          <view class="modal-actions">
            <button class="btn-small clear-btn" @click="clearAllRecords" v-if="executionRecords.length > 0">清空</button>
            <view class="close-btn" @click="hideRecordsModal">
              <uni-icons type="close" size="20" color="#666"></uni-icons>
            </view>
          </view>
        </view>
        
        <view class="modal-content">
          <view v-if="executionRecords.length === 0" class="empty-records">
            <uni-icons type="info" size="48" color="#ccc"></uni-icons>
            <text class="empty-text">暂无执行记录</text>
          </view>
          
          <view v-else class="records-table-wrapper">
            <table class="records-table">
              <thead>
                <tr>
                  <th class="fixed-column">SN</th>
				   <th>备注</th>  
				  <th>电伏数</th>
                  <th>外观编码</th>                 
                  <th>仓库名</th>
                 <th>规格型号</th>
                  <th>时间</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(record, index) in executionRecords" :key="index">
                  <td class="fixed-column">{{ record.sn }}</td>
				  <td>{{ record.remark || '' }}</td>
				  <td>{{ record.snDf || '' }}</td>				  
                  <td>{{ record.snWgbm || '' }}</td>
                  <td>{{ record.warehouseName || '' }}</td>
				  <td>{{ record.specification || '' }}</td>
                  <td>{{ formatTime(record.timestamp) }}</td>
                </tr>
              </tbody>
            </table>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { createInboundBySn, executePutaway } from '@/api/wm/productrecpt.js'
import warehouse from './common/warehouse/warehouse.vue'
import VideoUpload from '@/components/video/video-upload.vue'
import VideoPreview from '@/components/video/video-preview.vue'
import { initScan, startScan, stopScan, isPdaScanAvailable } from '@/utils/pdaScan'

export default {
  name: 'PreInbound',
  components: { 
    warehouse,
    VideoUpload,
    VideoPreview
  },
  data() {
    return {
      form: { sn: '' },
      recpt: {},
      // 与入库确认页保持一致的仓位选择数据结构
      selectedWarehouseData: null,
      warehouseDisplayMode: 'name',
      locationDisplayMode: 'name',
      areaDisplayMode: 'code',
      scannedAreaCode: '',
      saving: false,
      // 添加备注字段
      locationRemark: '',
      // 视频上传相关字段
      uploadedVideoUrl: '', // 上传后的视频URL
      // PDA扫描监听相关
      // 执行记录相关字段
      executionRecords: [], // 执行记录数组
      // 输入框聚焦控制
      shouldFocus: false
    }
  },
  computed: {
    locationText() {
      const l = this.selectedWarehouseData
      if (!l || !l.warehouseName) return ''
      const segs = [l.warehouseName, l.locationName, l.areaName].filter(Boolean)
      return segs.join(' / ')
    },
    canPutaway() {
      return !!(this.recpt.recptHeader && !this.saving) //  && this.selectedWarehouseData && this.selectedWarehouseData.location && this.selectedWarehouseData.area
    }
  },

  // 生命周期钩子
  onLoad() {
    this.initPdaScanListener()
    this.loadRecordsFromStorage()
  },

  onShow() {
    // 页面显示时启动扫描监听
    // this.startScanListener()
    // 页面显示时聚焦输入框
    this.$nextTick(() => {
      this.shouldFocus = true
    })
  },

  onHide() {
    // 页面隐藏时停止扫描监听
    this.stopScanListener()
  },

  onUnload() {
    // 页面卸载时清理资源
    this.executionRecords = []
    uni.removeStorageSync('preinbound_execution_records')
    this.cleanupScanListener()
  },

  methods: {
    // 初始化PDA扫描监听
    initPdaScanListener() {
      console.log('初始化PDA扫描监听')

      // 检查PDA扫描功能是否可用
      if (isPdaScanAvailable()) {
        // 初始化广播扫描
        initScan(this.handlePdaScanResult)
        console.log('PDA广播扫描已初始化')
      }
    },

    // 启动扫描监听
    startScanListener() {
      try {
        if (isPdaScanAvailable()) {
          startScan()
          console.log('PDA广播扫描监听已启动')
        }
      } catch (error) {
        console.error('启动扫描监听失败:', error)
      }
    },

    // 停止扫描监听
    stopScanListener() {
      try {
        if (isPdaScanAvailable()) {
          stopScan()
          console.log('PDA广播扫描监听已停止')
        }
      } catch (error) {
        console.error('停止扫描监听失败:', error)
      }
    },

    // 清理扫描监听资源
    cleanupScanListener() {
      this.stopScanListener()
      console.log('PDA扫描资源已清理')
    },

    // 处理PDA扫描结果
    handlePdaScanResult(code) {
      console.log('PDA红外扫描结果:', code)
      
      if (!code || !code.trim()) {
        console.log('扫描结果为空')
        return
      }
      
      const scanData = code.trim()
      const sn = this.parseSn(scanData)
      
      // 自动填充到输入框（仅保留SN段）
      this.form.sn = sn
      
      // 自动处理扫描结果
      this.handleCreateBySn()
    },


    handleScan() {
      // 简化：调用平台扫码能力
      uni.scanCode({
        onlyFromCamera: true,
        success: (res) => {
          const raw = res.result
          this.form.sn = this.parseSn(raw)
          // 扫码成功后自动调用创建入库单方法
          this.handleCreateBySn()
        },
        fail: () => {
          uni.showToast({ title: '扫码失败', icon: 'none' })
        }
      })
    },
    
    // 解析SN（支持 itemCode*sn 或直接sn）
    parseSn(raw) {
      if (!raw) return ''
      const s = String(raw).trim()
      if (!s) return ''
      const parts = s.split('*')
      // 取最后一段作为SN，避免多段星号的情况
      return parts[parts.length - 1].trim()
    },
    async handleCreateBySn() {
      if (!this.form.sn) return
      
      // 判断输入值是否存在 *，如果存在则提取 * 后面的部分
      let querySn = String(this.form.sn || '').trim()
      if (!querySn) return
      
      if (querySn.includes('*')) {
        // 如果包含 *，提取 * 后面的部分
        const parts = querySn.split('*')
        querySn = parts[parts.length - 1].trim()
        // 更新输入框显示的值（可选，保持原始输入或显示提取后的值）
        this.form.sn = querySn
      }
      
      // 先清空之前的信息，避免新旧信息混在一起
      this.clearPreviousData()
      
        uni.showLoading({ title: '创建中...' })
      
      createInboundBySn({ sn: querySn }).then(resp => {
        // 只有code=200才会进入这里
        if (resp && resp.code === 200) {
          this.recpt = resp.data || {}
          
          // 根据接口文档，检查是否是SN重复扫描
          if (resp.msg === "SN已存在，返回现有信息") {
            uni.showToast({ 
              title: 'SN已存在，已加载现有入库单信息', 
              icon: 'none',
              duration: 1000
            })
          } else {
            // 正常创建成功
            uni.showToast({ 
              title: resp.msg || '创建成功', 
              icon: 'success',
              duration: 2000
            })
          }
          
          // 清空之前选择的仓位，让用户重新选择
          this.selectedWarehouseData = null
          // 备注 - 安全访问 recptDetail，确保是字符串类型并去除空格
          const remark = this.recpt.recptDetail?.remark
          this.locationRemark = remark ? String(remark).trim() : ""
        }
      }).catch(error => {
        // code=500等业务错误和网络异常都会进入这里
        console.log('创建失败:', error)
        
        // 检查是否是业务错误（code=500）
        if (error === '500') {
          // 拦截器已经显示了具体的业务错误信息，这里不需要再显示
          console.log('业务错误，拦截器已显示toast')
        } else {
          // 真正的网络异常
          uni.showToast({ 
            title: '网络异常，请检查网络连接后重试', 
            icon: 'none',
            duration: 3000
          })
        }
      }).finally(() => {
        uni.hideLoading()
      })
    },
    // 选中仓位（与 product.vue 保持同名事件）
    onWarehouseSelected(data) {
      this.selectedWarehouseData = data
    },
    // 获取状态文本
    getStatusText(status) {
    	const statusMap = {
    		'PREPARE': '草稿',
    		'CONFIRMED': '已确认',
    		'APPROVING': '审批中',
    		'APPROVED': '已审批',
    		'FINISHED': '已完成',
    		'CANCELED': '已取消'
    	}
    	return statusMap[status] || status
    },
    
    // 获取状态样式类
    getStatusClass(status) {
    	const classMap = {
    		'PREPARE': 'status-prepare',
    		'CONFIRMED': 'status-confirmed',
    		'APPROVING': 'status-approving',
    		'APPROVED': 'status-approved',
    		'FINISHED': 'status-finished',
    		'CANCELED': 'status-canceled'
    	}
    	return classMap[status] || 'status-default'
    },
    async handlePutaway() {
        if (!this.canPutaway) {
          uni.showToast({
            title: '请完善信息！', 
            icon: 'none',
            duration: 3000
          })
          return
        }
      
      
        this.saving = true
        uni.showLoading({ title: '预入库中...' })
        
      // 使用 executePutaway 接口，传递完整的仓位信息和备注
        const putawayData = {
          detailId: this.recpt.recptDetail?.detailId,
          recptId: this.recpt.recptHeader.recptId,
          lineId: this.recpt.recptLine.lineId,
          warehouseId: this.selectedWarehouseData?this.selectedWarehouseData.warehouseId:null,
          locationId: this.selectedWarehouseData?this.selectedWarehouseData.locationId:null,
          areaId: this.selectedWarehouseData?this.selectedWarehouseData.areaId:null,
          quantity: 1,
          // 添加备注字段
          remark: this.locationRemark,
          // 添加视频URL字段（简化：只传递URL）
          videoUrl: this.uploadedVideoUrl || ''
	 }
      console.log(JSON.stringify(putawayData));
      executePutaway(putawayData).then(resp => {
        // 所有情况都会进入这里（包括code=500）
        if (resp && resp.code === 200) {
          // 根据接口文档，检查是否是SN重复上架
          if (resp.msg === "SN已存在，无需重复上架") {
            uni.showToast({ 
              title: 'SN已存在，无需重复上架', 
              icon: 'none',
              duration: 3000
            })
          } else {
            // 正常预入库成功
            uni.showToast({ 
              title: resp.msg || '预入库完成', 
              icon: 'success',
              duration: 2000
            })
            
            // 添加执行记录
            this.addExecutionRecord()
          }
          // 上架成功后重置页面状态，不清空页面，让用户可以继续扫码
          this.resetPageState()

        } 
      }).catch(error => {
        // 网络异常等会进入这里
        console.log('网络异常:', error)
        if (error !== '500') {
          uni.showToast({ 
            title: '网络异常，请检查网络连接后重试', 
            icon: 'none',
            duration: 3000
          })
        }
      }).finally(() => {
        this.saving = false
        uni.hideLoading()
      })
    },
  
    // 视频上传组件事件处理
    onVideoUploadSuccess(data) {
      console.log('视频上传成功:', data)
      this.uploadedVideoUrl = data.url
      
      uni.showToast({
        title: '视频上传成功',
        icon: 'success',
        duration: 2000
      })
    },
    
    onVideoUploadError(error) {
      console.error('视频上传失败:', error)
      
      let errorMsg = '视频上传失败'
      if (error) {
        if (error.code === 401) {
          errorMsg = '认证失败，请重新登录'
        } else if (error.code === 500) {
          errorMsg = error.msg || error.message || '服务器错误，请稍后重试'
        } else if (error.message) {
          errorMsg = error.message
        } else if (error.errMsg) {
          errorMsg = error.errMsg
        } else if (error.msg) {
          errorMsg = error.msg
        } else if (typeof error === 'string') {
          errorMsg = error
        }
      }
      
      uni.showToast({
        title: errorMsg,
        icon: 'none',
        duration: 3000
      })
    },
    
    onVideoRemoved() {
      console.log('视频已删除')
      this.uploadedVideoUrl = ''
    },
    
    // 显示执行记录弹窗
    showRecordsModal() {
      this.$refs.recordsPopup.open()
    },
    
    // 隐藏执行记录弹窗
    hideRecordsModal() {
      this.$refs.recordsPopup.close()
    },
    
    // 添加执行记录
    addExecutionRecord() {
      if (!this.recpt.sn || !this.selectedWarehouseData) return
      
      const record = {
        sn: this.recpt.sn,
        specification: this.recpt.recptDetail?.specification || '',
        snWgbm: this.recpt.recptDetail?.snWgbm || '',
        snDf: this.recpt.recptDetail?.snDf || '',
        warehouseName: this.selectedWarehouseData.warehouseName || '',
        remark: this.locationRemark || '',
        timestamp: new Date().getTime()
      }
      
      this.executionRecords.unshift(record)
      this.saveRecordsToStorage()
    },
    
    
    // 清空所有记录
    clearAllRecords() {
      uni.showModal({
        title: '确认清空',
        content: '确定要清空所有执行记录吗？',
        success: (res) => {
          if (res.confirm) {
            this.executionRecords = []
            this.saveRecordsToStorage()
          }
        }
      })
    },
    
    // 保存记录到本地存储
    saveRecordsToStorage() {
      try {
        uni.setStorageSync('preinbound_execution_records', this.executionRecords)
      } catch (error) {
        console.error('保存执行记录失败:', error)
      }
    },
    
    // 从本地存储加载记录
    loadRecordsFromStorage() {
      try {
        const records = uni.getStorageSync('preinbound_execution_records')
        if (records && Array.isArray(records)) {
          this.executionRecords = records
        }
      } catch (error) {
        console.error('加载执行记录失败:', error)
        this.executionRecords = []
      }
    },
    
    // 格式化时间（统一为数字格式，避免英文显示）
    formatTime(timestamp) {
      if (!timestamp) return '-'
      const d = new Date(timestamp)
      const y = d.getFullYear()
      const M = String(d.getMonth() + 1).padStart(2, '0')
      const D = String(d.getDate()).padStart(2, '0')
      const h = String(d.getHours()).padStart(2, '0')
      const m = String(d.getMinutes()).padStart(2, '0')
      const s = String(d.getSeconds()).padStart(2, '0')
      return `${y}-${M}-${D} ${h}:${m}:${s}`
    },
    
    // 清空之前的数据（扫描新SN时调用）
    clearPreviousData() {
      // 清空入库单信息
      this.recpt = {}
      // 清空选择的仓位
      this.selectedWarehouseData = null
      // 清空备注输入
      this.locationRemark = ''
      // 清空视频信息
      this.uploadedVideoUrl = ''
    },
    
    // 重置页面状态（上架成功后调用）
    resetPageState() {
      // 清空表单
      this.form.sn = ''
      // 清空入库单信息
      this.recpt = {}
      // 清空选择的仓位
      this.selectedWarehouseData = null
      // 清空备注输入
      this.locationRemark = ''
      // 清空视频信息
      this.uploadedVideoUrl = ''
      // 重置保存状态
      this.saving = false
      
      // 清空后重新聚焦输入框
      // uni-app的focus属性需要通过false->true的切换来触发
      this.shouldFocus = false
      // 使用nextTick确保DOM更新后再设置focus
      this.$nextTick(() => {
        this.shouldFocus = true
        // 如果第一次设置失败，延迟100ms后再次尝试
        setTimeout(() => {
          if (!this.shouldFocus) {
            this.shouldFocus = true
          }
        }, 150)
      })
    },
    
    // 手动聚焦输入框的方法
    focusInput() {
      this.shouldFocus = false
      this.$nextTick(() => {
        this.shouldFocus = true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.pre-inbound-container {
  padding: 20rpx;
  background: #f5f5f5;
  min-height: 100vh;
}


.query-section {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.query-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  
  .query-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }
  
  .records-btn {
    display: flex;
    align-items: center;
    gap: 8rpx;
    padding: 12rpx 20rpx;
    background: rgba(0, 122, 255, 0.1);
    border-radius: 20rpx;
    border: 1rpx solid rgba(0, 122, 255, 0.2);
    
    .btn-text {
      font-size: 24rpx;
      color: #007AFF;
      font-weight: 500;
    }
    
    &:active {
      background: rgba(0, 122, 255, 0.2);
      transform: scale(0.95);
    }
  }
}

.query-input-area {
  .input-group {
    .input-label {
      display: block;
      font-size: 26rpx;
      color: #333;
      margin-bottom: 15rpx;
    }
    
    .input-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      
      .query-input {
        flex: 1;
        height: 80rpx;
        padding: 0 100rpx 0 20rpx;
        border: 2rpx solid #e0e0e0;
        border-radius: 12rpx;
        font-size: 28rpx;
        background: #fff;
        
        &:focus {
          border-color: #007AFF;
        }
      }
      
      .input-icon {
        position: absolute;
        padding: 10rpx;
        border-radius: 50%;
        
        &.scan-icon {
          right: 60rpx;
          background: rgba(0, 122, 255, 0.08);
        }
        
        &.clear-icon {
          right: 16rpx;
        }
      }
    }
  }
}


.btn { height: 72rpx; border-radius: 36rpx; background: #fff; border: 2rpx solid #007AFF; color: #007AFF; }
.btn.primary { background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%); color: #fff; border: none; }

.info-card { 
  background: #fff; 
  border-radius: 12rpx; 
  padding: 30rpx; 
  margin-bottom: 20rpx; 
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  
  .info-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }
  
  .info-status {
    padding: 6rpx 12rpx;
    border-radius: 16rpx;
    font-size: 20rpx;
    
    &.status-prepare { background: #f8f9fa; color: #6c757d; }
    &.status-confirmed { background: #d1ecf1; color: #0c5460; }
    &.status-approved { background: #d4edda; color: #155724; }
    &.status-finished { background: #d4edda; color: #155724; }
    &.status-canceled { background: #f8d7da; color: #721c24; }
  }
}
.info-content { 
  .info-row {
    display: flex;
    justify-content: space-between;
    padding: 12rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .info-label {
      font-size: 26rpx;
      color: #666;
      min-width: 140rpx;
    }
    
    .info-value {
      font-size: 26rpx;
      color: #333;
      flex: 1;
      text-align: right;
    }
  }
}

.location-input-group { margin-bottom: 16rpx; }
.location-input-label { font-size: 26rpx; color: #666; margin-bottom: 8rpx; display: block; }
.location-preview { font-size: 26rpx; color: #666; margin: 8rpx 0 16rpx; }

/* 备注输入框样式 */
.remark-input-wrapper {
  position: relative;
  background: #fff;
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  padding: 16rpx;
}

.remark-textarea {
  width: 100%;
  min-height: 80rpx;
  font-size: 26rpx;
  color: #333;
  line-height: 1.5;
  border: none;
  outline: none;
  resize: none;
}

.remark-counter {
  position: absolute;
  bottom: 8rpx;
  right: 16rpx;
  font-size: 22rpx;
  color: #999;
}


.btn-small {
	padding: 12rpx 24rpx;
	font-size: 24rpx;
	border-radius: 8rpx;
	border: 2rpx solid #007AFF;
	color: #007AFF;
	background: #fff;
}

.btn-small.danger {
	border-color: #ff4757;
	color: #ff4757;
}

.btn-small.cancel {
	border-color: #999;
	color: #999;
}

.btn-small.retry {
	border-color: #007AFF;
	color: #007AFF;
	background: rgba(0, 122, 255, 0.1);
}

.btn-small.test-btn {
	border-color: #28a745;
	color: #28a745;
	background: rgba(40, 167, 69, 0.1);
	margin-right: 16rpx;
}

.btn-small.debug-btn {
	border-color: #6f42c1;
	color: #6f42c1;
	background: rgba(111, 66, 193, 0.1);
}

.video-test-section {
	margin-top: 16rpx;
	display: flex;
	justify-content: flex-start;
}

/* 明细数据展示样式 */
.detail-section {
  margin-bottom: 24rpx;
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 8rpx;
  border-left: 4rpx solid #007AFF;
}

.detail-section:last-child {
  margin-bottom: 0;
}

.detail-section-title {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 16rpx;
  padding-bottom: 8rpx;
  border-bottom: 1rpx solid #e0e0e0;
}

/* 仓位详情样式 */
.location-detail {
  background: #fff;
  border-radius: 8rpx;
  padding: 16rpx;
}

.location-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.location-item:has(.location-label:contains("备注")) {
  align-items: flex-start;
}

.location-item:last-child {
  border-bottom: none;
}

.location-label {
  font-size: 26rpx;
  color: #666;
  min-width: 120rpx;
}

.location-value {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
}

/* 备注项特殊样式 */
.location-item:last-child .location-value {
  min-height: 80rpx;
  padding: 16rpx 20rpx;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-radius: 12rpx;
  border: 2rpx solid #e3f2fd;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  word-wrap: break-word;
  line-height: 1.5;
  flex: 1;
  margin-left: 20rpx;
  font-size: 28rpx;
  color: #2c3e50;
  font-weight: 500;
  transition: all 0.3s ease;
}

.location-item:last-child .location-value:hover {
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  border-color: #2196f3;
}

.no-location {
  text-align: center;
  padding: 20rpx;
  background: #fff;
  border-radius: 8rpx;
}

.no-location-text {
  font-size: 26rpx;
  color: #999;
}


/* 其他信息样式 */
.other-detail {
  background: #fff;
  border-radius: 8rpx;
  padding: 16rpx;
}

.other-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.other-item:last-child {
  border-bottom: none;
}

.other-label {
  font-size: 26rpx;
  color: #666;
  min-width: 120rpx;
}

.other-value {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
}

/* 执行记录弹窗样式 */
.records-modal {
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  max-height: 70vh;
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 32rpx;
  border-bottom: 1rpx solid #e0e0e0;
  background: #f8f9fa;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.modal-actions {
  display: flex;
  align-items: center;
}

.close-btn {
  padding: 8rpx;
  margin-left: 16rpx;
}

.modal-content {
  padding: 24rpx 32rpx;
  max-height: 50vh;
  overflow-y: auto;
}

.empty-records {
  text-align: center;
  padding: 60rpx 20rpx;
}

.empty-text {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin: 16rpx 0 8rpx;
}

.empty-hint {
  display: block;
  font-size: 24rpx;
  color: #999;
}

/* 表格包装器 */
.records-table-wrapper {
  width: 100%;
  max-height: 45vh;
  overflow: auto;
  border: 1rpx solid #e0e0e0;
  border-radius: 8rpx;
}

/* 表格样式 */
.records-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 24rpx;
  background: #fff;
}

/* 表头样式 */
.records-table thead {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  position: sticky;
  top: 0;
  z-index: 10;
}

.records-table th {
  padding: 16rpx 12rpx;
  text-align: center;
  font-weight: bold;
  color: #333;
  border: 1rpx solid #e0e0e0;
  white-space: nowrap;
  font-size: 26rpx;
}

/* 固定列样式 */
.fixed-column {
  position: sticky;
  left: 0;
  background: #f8f9fa;
  z-index: 5;
  min-width: 200rpx;
  width: 200rpx;
  color: #333;
  font-weight: 500;
}

/* 表体样式 */
.records-table tbody tr {
  transition: background-color 0.2s ease;
}

.records-table tbody tr:hover {
  background-color: #f8f9fa;
}

.records-table tbody tr:nth-child(even) {
  background-color: #fafafa;
}

.records-table tbody tr:nth-child(even):hover {
  background-color: #f0f0f0;
}

.records-table td {
  padding: 16rpx 12rpx;
  text-align: center;
  border: 1rpx solid #e0e0e0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 各列最小宽度 */
.records-table th:nth-child(2),
.records-table td:nth-child(2) { min-width: 180rpx; } /* 规格型号 */

.records-table th:nth-child(3),
.records-table td:nth-child(3) { min-width: 120rpx; } /* 外观编码 */

.records-table th:nth-child(4),
.records-table td:nth-child(4) { min-width: 100rpx; } /* 电伏数 */

.records-table th:nth-child(5),
.records-table td:nth-child(5) { min-width: 120rpx; } /* 仓库名 */

.records-table th:nth-child(6),
.records-table td:nth-child(6) { min-width: 150rpx; } /* 备注 */

.records-table th:nth-child(7),
.records-table td:nth-child(7) { min-width: 120rpx; } /* 时间 */

.clear-btn {
  padding: 8rpx 16rpx;
  font-size: 22rpx;
  border-radius: 6rpx;
  border: 2rpx solid #ff4757;
  color: #ff4757;
  background: rgba(255, 71, 87, 0.1);
}

/* 复用 product.vue 的部分色彩与间距设定，保证风格一致 */
</style>


